<template>
  <el-form ref="form">
    <el-form-item>
      <div
        v-for="(item, index) in form"
        style="float: left; width: 100%; text-align: left"
      >
        <div
          style="
            font-size: 16px;
            text-align: left;
            margin-left: 80px;
            width: 78%;
            display: inline;
          "
        >
          订单预留字段{{ item.id - 5 }}： 字段名称：
        </div>
        <el-input
          v-model="item.fieldName"
          placeholder="单行输入"
          style="width: 13%; margin-right: 10px"
        ></el-input>

        <div
          v-if="item.id > 15"
          style="
            font-size: 16px;
            text-align: left;
            margin-left: 15px;
            width: 78%;
            display: inline;
          "
        >
          字段内容：
          <div
            v-for="(item2, index2) in item.content"
            style="width: 100%; display: inline"
          >
            <el-input
              v-model="item2.content"
              placeholder="单行输入"
              style="width: 13%"
            ></el-input>
            <el-button
              type="primary"
              v-if="index2 == 0"
              style=""
              @click="addOne2(index, index2)"
              >✚</el-button
            >
            <el-button
              type="danger"
              v-else
              style="margin: 0 10px"
              @click="delOne2(index, index2)"
              >—</el-button
            >
          </div>
        </div>
        <el-checkbox
          label="是否激活"
          :true-label="1"
          :false-label="2"
          v-model="item.display"
          style="margin-left: 15px"
        ></el-checkbox>
        <!--        <el-button type="primary"  v-if="item.id==6" style="margin-left:20px;" @click="addOne()">添 加</el-button>-->
        <!--        <el-button type="danger" v-else style="margin-left:20px;" @click="delOne(index)">删 除</el-button>-->

        <div style="width: 100%; height: 10px; margin-bottom: 20px"></div>
      </div>
    </el-form-item>

    <el-divider></el-divider>

    <el-form-item style="text-align: center">
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { EventBus } from "bus/mybus.js";
import {
  getOrderYlData,
  doOrderYlUpdate,
  getProductTypeData,
  doProductTypeUpdate,
} from "../../crm/system/customOrder";

export default {
  name: "OrderYl",
  data() {
    return {
      form: {
        list: {
          id: "",
          fieldName: "",
          display: "",
          content: [{ content: "" }],
        },
      },
    };
  },
  created() {
    this.getRequestData();
  },

  methods: {
    getRequestData() {
      //根据id  获取数据
      const payload = {};
      payload.operatorId = this.$store.state.operatorId;
      getOrderYlData(payload)
        .then((res) => {
          this.form = res;
        })
        .catch((err) => {
          EventBus.$emit("closeloading");
        });
    },

    //新增管理区域..
    // addOne(){
    //   this.form.push({})
    // },
    //删除管理区域..
    // delOne(index){
    //   //先去除 employeeId
    //   this.$delete(this.form,index)
    // },

    addOne2(index, index2) {
      this.form[index].content.push({});
    },
    //删除管理区域..
    delOne2(index, index2) {
      this.form[index].content.splice(index2, 1);
    },

    //提交
    onSubmit() {
      this.$confirm("确认提交操作??", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const payload = this.form;
          payload.operatorId = this.$store.state.operatorId;
          console.log("savedata");
          console.log(payload);
          doOrderYlUpdate(payload)
            .then((res) => {
              this.$message.success("操作成功");
            })
            .catch((err) => {
              EventBus.$emit("closeloading");
            });
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped>
.el-select:hover .el-input__inner {
  border-color: #c0c4cc;
}
</style>